Vue:父子组件传值( props、sync、v | 您所在的位置:网站首页 › vue props v-model › Vue:父子组件传值( props、sync、v |
父子组件props传值
子组件通过$emit方法,通过自定义事件的方式将自身的值传递给父组件 // 子组件通过$emit方法,并传入事件名称'change'来触发父组件监听的change事件 this.$emit('change', 200) // 父组件监听change事件 父子组件传值 .sync 修饰符在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件两侧都没有明显的变更来源。 所以推荐以 update:myPropName 的模式触发事件取而代之。 .sync修饰符 // 子组件通过$emit方法,并传入事件名称'update:value'来触发父组件监听的 @update:value 事件 this.$emit('update:value', 200) // 父组件监听@update:value 事件 // .sync简写 等价于 @update:value="(val) => this.money = val" v-model组件传值一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突 自定义组件的-v-model // 子组件通过$emit方法,并传入事件名称'input'来触发父组件监听的 @input 事件 this.$emit('input', 200) // 父组件监听@input 事件 // v-model 等价于 @input="(val) => this.money = val" .sync 和 v-model 的区别 ?这里是引用 相同点 都是语法糖,都可以实现父子组件中的数据的双向通信。 区别点 格式不同: v-model=“num”, :num.sync=“num” v-model: @input + value 传递value值,是固定的 :num.sync: @update:num :num是因为一个自定义组件可以传输多个值,用来区分的 v-model只能用一次;.sync可以有多个。 参考 https://zhuanlan.zhihu.com/p/85338233https://blog.csdn.net/weixin_48837605/article/details/119616396 |
CopyRight 2018-2019 实验室设备网 版权所有 |